import React, { Component } from 'react'
import { FormattedMessage } from 'react-intl'
import { Button } from 'antd-mobile'
import { DirectionItem, TypeItem, DitanceItem, RedirectionItem, PriceItem} from './'
import { ChoseButton } from 'component/position'
import Reflux from 'reflux'
import { PriceAction } from '../../actions'
import { PriceStore } from '../../stores'
import { helper, config, myFetch } from '../utils'

export default class PositionOrderIfo extends Reflux.Component {
  constructor(props) {
    super(props)
    this.state = {
      direction: 0,
      redir: 1,
      type: 'stop',
      pric: 0,
      pric1: 0,
      pric2: 0
    }
    this.store = PriceStore
    this.storeKeys = ['sellPrice', 'buyPrice']
  }

  componentDidMount() {
    PriceAction.changePrice(this.props.data.pair)
  }
  componentWillUnmount() {
    this.timerprice && clearTimeout(this.timerprice)
  }
  onOrderPrice = () => {
    let orderPrice 
    if (this.state.direction == 0) {
      orderPrice = this.state.sellPrice
    } else if (this.state.direction == 1 ) {
      orderPrice = this.state.buyPrice
    }
    return orderPrice
  }
  onTimesChange = (e) => {
    if (e === 'undefined') {
      return
    }
    this.setState({
      pric: e
    })
  }
  onTimesChange1 = (e) => {
    if (e === 'undefined') {
      return
    }
    this.setState({
      pric1: e
    })
  }
  onTimesChange2 = (e) => {
    if (e === 'undefined') {
      return
    }
    this.setState({
      pric2: e
    })
  }
  onChangeDirection = (i) => {
  	if (i == this.state.direction) {
      return
    }
    let redir
    if (i == 1) {
      redir = 0
    } else if (i == 0) {
      redir = 1
    }
    this.setState({
      direction: i,
      redir: redir,
      pric: 0,
      pric1: 0,
      pric2: 0
    })
  }
  onConfirmClick = () => {
    const options = {
      method: 'POST',
      body: JSON.stringify({
        PAIR: this.props.data.pair,
        BSKB: this.state.direction,
        AMN1: helper.accMul(this.props.data.amn, 1000),
        SKJ1: this.state.type == 'stop' ? 4 : 3,
        PRI1: this.state.pric ? this.state.pric : this.onOrderPrice(),
        YKK1: helper.requestTime(this.props.data.ykk),
        AMN2: helper.accMul(this.props.data.amn, 1000),
        YKK2: helper.requestTime(this.props.data.ykk),
        PRI2: this.state.pric1 ? this.state.pric1 : this.onOrderPrice(),
        SKJ3: 4,
        PRI3: this.state.pric2 ? this.state.pric2 : this.onOrderPrice(),
        OFLG: 1
      })
    }
    myFetch(`${config.rootApi}/mOrderifo`, options, true)
     .then((rs) => {
        if (rs && rs.statusCode == '0') {
          Toast.success('挂单成功')
        }
     })
  }
  onChangeType = (i) => {
    this.setState({
      type: i
    })
  }
  render() {
  	const { type, direction } = this.state
  	return (
  	  <div className="rt-order-ifo">
        <ul className="rt-order-common">
          <DirectionItem
            defaultDirection={direction}
            sellPrice={this.state.sellPrice}
            buyPrice={this.state.buyPrice}
            onClick={
              this.onChangeDirection
            }
          />
          <TypeItem
            defaultType={type}
            onClick={
              this.onChangeType
            }
          />
          <PriceItem
            orderPrice={this.onOrderPrice()}
            onTimesChange={this.onTimesChange}
            direction={direction}
            type={type}
            ccy={this.props.data.pair}
          />
        <div className="rt-height44">
          <FormattedMessage id="mainsublist"/>
          <FormattedMessage id="one"/>
          <FormattedMessage id="or"/>
          <FormattedMessage id="copySheet"/>
          <FormattedMessage id="two"/>
        </div>
        <RedirectionItem
          redirection={this.state.redir}
          sellPrice={this.state.sellPrice}
          buyPrice={this.state.buyPrice}
          name={
            <span>
              <FormattedMessage id="copySheet"/>
              <FormattedMessage id="one"/>
            </span>
          }
        />
        <TypeItem
          nostop={true}
          defaultType={'limit'}
        />
        <PriceItem
          orderPrice={this.onOrderPrice()}
          onTimesChange={this.onTimesChange1}
          direction={direction}
          type={'limit'}
          ccy={this.props.data.pair}
        />
        {/*<DitanceItem />*/}
        <div className="rt-height44">
          <FormattedMessage id="or"/>
        </div>
        <RedirectionItem
          redirection={this.state.redir}
          sellPrice={this.state.sellPrice}
          buyPrice={this.state.buyPrice}
          name={
            <span>
              <FormattedMessage id="copySheet"/>
              <FormattedMessage id="two"/>
            </span>
          }
        />
        <TypeItem
          nolimit={true}
          defaultType={'stop'}
        />
        <PriceItem
          orderPrice={this.onOrderPrice()}
          onTimesChange={this.onTimesChange2}
          direction={this.state.direction}
          type={'stop'}
          ccy={this.props.data.pair}
        />
        <div className="-background rt-height22"></div>
        <ChoseButton
          leftNode={
            <FormattedMessage id="reset"/>
          }
          rightNode={
            <FormattedMessage id="modifyguadan"/>
          }
          onConfirmClick={
            this.onConfirmClick
          }
        />
        </ul>
      </div>
  	)
  }
}